{% extends "base.html" %}
{% load static %}

{% block page_css %}
  <style>
      /* fontawesome有些fas图标在谷歌/火狐浏览器无法显示，解决方法参见：
            https://github.com/FortAwesome/Font-Awesome/issues/11946
      */
      .fa-low-vision:before {
          content: "\f2a8";
          font-weight: 900;
      }

      .fa-at:before {
          content: "\f1fa";
          font-weight: 900;
      }

      .fa-ban:before {
          content: "\f05e";
          font-weight: 900;
      }

      .fa-file-csv:before {
          content: "\f6dd";
          font-weight: 900;
      }

      .fa-file-excel:before {
          content: "\f1c3";
          font-weight: 900;
      }

      .fa-download:before {
          content: "\f019";
          font-weight: 900;
      }

      .fa-upload:before {
          content: "\f093";
          font-weight: 900;
      }

      .ui-autocomplete {
          background-color: white;
          width: 400px;
          border: 1em;
          padding: 30px;
          z-index: 2147483647;
        }
  </style>
{% endblock %}

{% block card-title %}
<h3 class="card-title" id="card-title1"></h3>
{% endblock %}

{% block card-body %}
<p class="bg-info text-white mt-2 text-lg">&nbsp;设置过滤条件</p>
<div class="row" id="card1-body" hidden="hidden">
    <form id="searchForm" role="form" class="row-cols-11">
        <div class="form-inline mb-1 search_condition" id="condition1">
            <span class="text-info h6 mr-3">过滤条件1</span>
            <div class="form-group mr-2">
                <select class="form-control SearchNot" id="SearchNot1" name="SearchNot1" required="true">
                    <option value="0" selected="selected"></option>
                    <option value="1">非</option>
                </select>
            </div>
            <div class="form-group mr-2">
                <label class="mr-1" for="SearchFieldName1">查询字段</label>
                <select class="form-control SearchFieldName" name="SearchFieldName1" id="SearchFieldName1"
                        required="true"></select>
            </div>
            <select class="form-control SearchFieldValuePre mr-2" id="SearchFieldValuePre1"
                            name="SearchFieldValuePre1" required="true">
                <option value="exact" selected="selected">等于(大小写严格匹配)</option>
                <option value="iexact">等于(忽略大小写)</option>
                <option value="contains">包含(大小写严格匹配)</option>
                <option value="icontains">包含(忽略大小写)</option>
                <option value="gt">大于</option>
                <option value="gte">大于等于</option>
                <option value="lt">小于</option>
                <option value="lte">小于等于</option>
            </select>
            <div class="form-group">
                <input type="text" class="form-control SearchFieldValue" placeholder="请输入查询字段值"
                        id="SearchFieldValue1">
            </div>
        </div>
    </form>
    <div class="row-cols-1 ml-2" style="position: relative;">
        <a id='conditionAdd' class="bottom" style="position: absolute; bottom: 0">
            <span style="font-size: 1.5em; color: #007bff;"><i class="fas fa-plus-circle"></i></span></a>
    </div>
</div>
<form id="searchForm3" role="form">
    <textarea class="form-control" rows="3" id="SearchText" name="SearchText" hidden></textarea>
    <div class="form-inline my-2">
        <button id='textareaSubmit' type="submit" class="btn btn-primary btn-sm mr-3">查询</button>
        <button id='textareaClear' type="button" class="btn btn-warning btn-sm mr-3">清除过滤条件</button>
    </div>
</form>
<p class="bg-info text-white mt-4 text-lg">&nbsp;结果数据</p>
<h6 id="searchStat"></h6>
<div id="resetTable">
</div>
{% endblock %}

{% block plot_card %}

{% endblock %}

{% block modal_html %}
<!-- NEW and EDIT Modal -->
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="modal_title"></h4>
            </div>
            <div class="modal-body">
                {% block ModalFormHeader %}

                {% endblock %}
                <form id="modelForm">
                    {% csrf_token %}
                    {% block ModalForm %}

                    {% endblock %}
                </form>
            </div>
            <div>
                <i class="loading-indicator fas fa-sync fa-spin fa-2x" style="display:none;color: blue;margin-left: 6em"></i>
            </div>
            <div class="modal-footer">
                <p id="myModalError"></p>
                <button type="button" class="btn btn-warning" id='myModalReset'>重置</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- upload Modal -->
<div class="modal fade" id="uploadModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="uploadModal_title"> 上传文件进行批量添加</h4>
            </div>
            <div class="modal-body">
                <form id="UploadForm" method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="uploadUrl"> 数据表名称</label>
                        <input type="text" class="form-control" id="uploadUrl" name="uploadUrl"
                               placeholder="请输入数据表名称" required="true">
                    </div>
                    <div class="form-group">
                        <label for="uploadFile"> 上传文件</label>
                        <input type="file" class="form-control" id="uploadFile" name="uploadFile"
                               placeholder="请上传文件" required="true">
                    </div>
                    <button id='uploadSubmit' type="submit" class="btn btn-success btn-block">提交上传</button>
                </form>
                <br>
                <div>
                    <i class="loading-indicator fas fa-sync fa-spin fa-2x" style="display:none;color: blue;margin-left: 6em"></i>
<!--                <img src="{% static 'image/ajax-loader.gif' %}" id="loading-indicator" class = "modal-body" style="display:none;left: 12em">-->
                </div>
                <dl>
                    <dt class="text-primary front-weight-bold">上传结果信息：</dt>
                    <dd id="uploadInfo" class="text-primary" style="white-space: pre-line"></dd>
                    <dt class="text-danger front-weight-bold">报错信息：</dt>
                    <dd id="uploadError" class="text-danger front-weight-bold" style="white-space: pre-line"></dd>
                </dl>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info downloadExcel">模板下载</button>
                <button type="button" class="btn btn-warning" id='uploadReset'>重置</button>
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- Delete Modal -->
<div class="modal fade" id="confirm">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-danger">是否确认删除?</h4>
            </div>
            <div class="modal-body">
                <button type="button" data-dismiss="modal" class="btn btn-danger" id="delete">确认删除</button>
                <button type="button" data-dismiss="modal" class="btn">取消</button>
            </div>
            <div>
                <i class="loading-indicator fas fa-sync fa-spin fa-2x" style="display:none;color: blue;margin-left: 6em"></i>
            </div>
        </div>
    </div>
</div>

<!-- Bulk Delete Modal -->
<div class="modal fade" id="bulkDelModal">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title text-danger" id="bulkDelModalInfo"></h4>
            </div>
            <div class="modal-body">
                <input type="hidden" id="bulkDelUrl" value="">
                <button type="button" data-dismiss="modal" class="btn btn-danger" id="bulkDelete">确认删除</button>
                <button type="button" data-dismiss="modal" class="btn">取消</button>
            </div>
            <div>
                <i class="loading-indicator fas fa-sync fa-spin fa-2x" style="display:none;color: blue;margin-left: 6em"></i>
            </div>
            <div class="modal-footer">
                <p id="bulkDelError"></p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block modal_js %}
<script>
    function simple_delete_func(model0, url0, id0){
        let res = delete_by_id_simple(url0, id0);
        if (res[0] === "success") {
            databaseRecordAjaxPut('{{ user.id }}', model0, "单项删除", "id：" + res[1]);
            window.location.reload(true);
        } else {
            console.log(res[1]);
        }
    }

    function simple_bulkDelete_func(table, model0, url0){
        let arrayLen = table.rows(".selected").data().length;
        if (arrayLen > 0) {
            let delete_id_list = [];
            for (let i = 0; i < arrayLen; i++) {
                let delete_id = table.rows(".selected").data()[i]['id'];
                let res = delete_by_id_simple(url0, delete_id);
                if (res[0] === "success") {
                    delete_id_list.push(res[1]);
                }
            }
            databaseRecordAjaxPut('{{ user.id }}', model0, "批量删除", "id_list：[" + delete_id_list + "]");
            window.location.reload(true);
        } else {
            $('#bulkDelError').text('没有行被选中，请先选中目标行。');
        }
    }

    function single_page_generator(model0, url0, id0, button_bool1, button_bool2, input_params){
        let dataModelForm; //更新弹窗默认值，重置按钮需要
        let data0 = $.ajax({
            url: url0, dataType: 'json', contentType: "application/json",
            type: "get", async: false, data: {fields: "id"}
        }).responseJSON;
        $("#card-title1").text(input_params["title1_text"] + data0.length);

        // 生成table的表头和table的columns变量
        let table_columns = [], table_columnDefs = [], hide_col = [], modal_dict = {};
        let new_modal_fields = [], edit_modal_fields = [];
        let table_header_html = "", conditionAdd = 1;
        table_header_html += "<th>索引</th>";
        table_columns.push({
            data: 'id', width: "1%",
            // 若想前端显示的不一样，则需要"render"函数
            'render': function (data, type, full, meta) {
                return meta.row + 1 + meta.settings._iDisplayStart;
            }
        });
        $.each(input_params.fields, function (i, v) {
            table_header_html += "<th>" + v[1] + "</th>";
            table_columns.push({ "data": v[0] });
            if (v[2] === 1){ // 出现在modal
                let label_str_part1 = '<label class="mr-1 form-label" for="' + v[0] + '"> ' , label_str_part2 =  v[1] + '</label>';
                edit_modal_fields.push(v[0]);
                let input_str;
                // 根据input类型生成input_str
                if (v[5] === 'select') {
                    input_str = '<select type="text" class="form-control" id="' + v[0] + '" name="' + v[0] + '" ';
                } else if (v[5] === 'select_multiple'){
                    input_str = '<select type="text" class="form-control" multiple="multiple" id="' + v[0] + '" name="' + v[0] + '" ';
                } else if (v[5] === 'text'){
                    input_str = '<input type="text" class="form-control" id="' + v[0] + '" name="' + v[0] +
                        '" placeholder="' + v[1];
                } else if (v[5] === 'number_1'){
                    input_str = '<input type="number" step="1" class="form-control" id="' + v[0] + '" name="' + v[0] +
                        '" placeholder="' + v[1];
                } else if (v[5] === 'number_0.001'){
                    input_str = '<input type="number" step="0.001" class="form-control" id="' + v[0] + '" name="' + v[0] +
                        '" placeholder="' + v[1];
                } else if (v[5] === 'number_0.0001'){
                    input_str = '<input type="number" step="0.0001" class="form-control" id="' + v[0] + '" name="' + v[0] +
                        '" placeholder="' + v[1];
                } else if (v[5] === 'date'){
                    input_str = '<input type="date" class="form-control" id="' + v[0] + '" name="' + v[0] +
                        '" placeholder="' + v[1];
                }
                modal_dict[v[3]] = '<div class="form-group my-2 form-inline">';
                if (v[4] === 1){
                    // 如果必填，label前面增加*号
                    modal_dict[v[3]] += label_str_part1 + '<span><a class="text-danger front-weight-bold">* </a>' + '</span>' + label_str_part2 ;
                    if (v[5] === 'select' || v[5] === 'select_multiple') {
                        input_str += 'required="true">';
                        $.each(v[6], function (i2, v2) {
                            if (i2===0){
                                input_str += '<option value="' + v2[0] + '" selected="selected">' + v2[1] + '</option>';
                            } else {
                                input_str += '<option value="' + v2[0] + '">' + v2[1] + '</option>';
                            }
                        });
                        input_str += '</select>';
                    } else {
                        new_modal_fields.push(v[0]);
                        input_str += '，必填" required="true">';
                    }
                } else {
                    modal_dict[v[3]] += label_str_part1 + label_str_part2;
                    if (v[5] === 'select') {
                        input_str += '>';
                        $.each(v[6], function (i2, v2) {
                            if (i2===0){
                                input_str += '<option value="' + v2[0] + '" selected="selected">' + v2[1] + '</option>';
                            } else {
                                input_str += '<option value="' + v2[0] + '">' + v2[1] + '</option>';
                            }
                        });
                        input_str += '</select>';
                    } else {
                        input_str += '，默认：' + v[6] + '" value="' + v[6] + '">';
                    }
                }
                modal_dict[v[3]] += input_str;
                modal_dict[v[3]] += '</div>';
            }
        });
        table_header_html += "<th>操作</th>";
        table_columns.push({
            data: null,
            "defaultContent": '<button type="button" class="btn btn-primary mt-1 mr-1">更新</button>' +
                '<button type="button" class="btn btn-danger mt-1 ml-1">删除</button>'
        });
        if (table_columns.length > 7) {
            hide_col = range(6, table_columns.length-1);
            table_columnDefs.push({ "targets": hide_col, "visible": false })
        }

        // 生成modal
        let tmp_id = $("#modelForm");
        for (let i=0; i < Object.keys(modal_dict).length; i++){
            tmp_id.append(modal_dict[i]);
        }
        tmp_id.append('<input type="hidden" id="type" name="type" value="">');
        tmp_id.append('<button id="submit" type="submit" class="btn btn-success btn-block">OK</button>');
        function MyModelInit(title_name, data) {
            dataModelForm = data;
            if (title_name === '更新') {
                $.each(edit_modal_fields, function (i, v) {
                    $('#'+v).val(data[v]);
                });
                $('#type').val('edit');
                $('#modal_title').text('更新');
            } else {
                $.each(new_modal_fields, function (i, v) {
                    $('#'+v).val("");
                });
                $('#type').val('new');
                $('#modal_title').text('新增');
            }
        }

        // 构建table
        let bulk_buttons = [];
        if (button_bool1===true) {
            bulk_buttons.push({
                text: ' 批量添加模板下载', attr: { id: 'downloadExcel' },
                action: function ( e, dt, node, config ) {
                    window.location.href = input_params["download_excel"];
                },
                className: 'btn btn-info fas fa-download my-1'
            });
            bulk_buttons.push({
                text: ' 批量添加', attr: { id: 'upload' },
                action: function ( e, dt, node, config ) {
                    $('#uploadFile').val("");
                    $('#uploadError').val("");
                    $('#uploadUrl').val(model0);
                    $("#uploadModal").modal();
                },
                className: 'btn btn-primary fas fa-upload my-1'
            });
        }
        if (button_bool2===true) {
            bulk_buttons.push({
                text: ' 批量删除', attr: { id: 'bulkDel' },
                action: function ( e, dt, node, config ) {
                    $('#bulkDelModalInfo').text('是否确认批量删除?(' + $('span.select-info>span').text() + ')');
                    $('#bulkDelUrl').val(model0);
                    $("#bulkDelModal").modal();
                },
                className: 'btn btn-danger fas fa-trash-alt my-1'
            });
        }

        let table;
        function create_table(ajax_url, action_afterTableInit){
            let serverSide_bool, api_pattern = /\/api/, ajax_data, table_div = $('#resetTable');
            table_div.empty(); //点击查询后，先将datatable删除
            let table_div_html = '<table id="table" class="table table-bordered table-hover dt-responsive"><thead>';
            table_div_html += '<tr id="table_header">' + table_header_html;
            table_div_html += '</tr></thead></table>';
            table_div.append(table_div_html);
            let table_element = $('#table');
            let output_buttons = [
                {
                    extend: 'copy', text: ' 复制所选到剪切板',
                    className: 'btn btn-primary dt-button buttons-columnVisibility fas fa-copy my-1',
                    exportOptions: { columns: range(table_columns.length-1) }
                },
                {
                    extend: 'csv', text: ' 输出所选到csv',
                    className: 'btn btn-primary dt-button buttons-columnVisibility fas fa-file-csv my-1',
                    exportOptions: { columns: range(table_columns.length-1) }
                }
            ];
            if (api_pattern.test(ajax_url) === true) {
                serverSide_bool = true;
                ajax_data = ajax_url;
                $('#searchStat').text("");
                output_buttons.push({
                    extend: 'csv', text: ' 输出当前页到csv',
                    className: 'btn btn-primary dt-button buttons-columnVisibility fas fa-file-alt my-1',
                    exportOptions: {
                        columns: range(table_columns.length-1),
                        modifier: {
                            selected: null
                        }
                    }
                });
                output_buttons.push({
                    text: ' 输出所有到csv', attr: { id: 'downloadExcel' },
                    action: function () {
                        window.location.href = url0.substring(4) + "?all=1";
                    },
                    className: 'btn btn-primary dt-button buttons-columnVisibility fas fa-file-excel my-1'
                });
            } else {
                serverSide_bool = false;
                ajax_data = {
                    "url": ajax_url,
                    "type": "POST",
                    "data": function (d) {
                        return $.extend({}, d, {
                            "queryset": $("#SearchText").val()
                        });
                    },
                    "dataSrc": function (json) {
                        // console.log(ajax_output);//此处json就是返回的数据
                        $('#searchStat').text('总记录数量：'+json.recordsTotal+'；过滤后结果的记录数量：'+json.recordsFiltered);
                        return json.data;
                    }
                };
                output_buttons.push({
                    extend: 'csv', text: ' 输出所有到csv',
                    className: 'btn btn-primary dt-button buttons-columnVisibility fas fa-file-excel my-1',
                    exportOptions: {
                        columns: range(table_columns.length-1),
                        modifier: {
                            selected: null
                        }
                    }
                });
            }
            let buttons_list = [
                {
                    text: ' 指定显示列', extend: 'colvis',
                    className: 'btn btn-primary far fa-eye my-1 dropdown-toggle button_group1',
                    postfixButtons: [
                        {
                            extend: 'colvisGroup', text: '显示默认', hide: hide_col,
                            className: 'dt-button buttons-columnVisibility'
                        },
                        {
                            extend: 'colvisGroup', text: '显示全部', show: ':hidden',
                            className: 'dt-button buttons-columnVisibility'

                        }],
                    columnText: function (dt, idx, title) {
                        return (idx + 1) + ': ' + title;
                    }
                },
                {
                    extend: 'selectAll', text: ' 选择全部',
                    className: 'btn btn-primary fas fa-at my-1',
                },
                {
                    extend: 'selectNone', text: ' 取消当前选择',
                    className: 'btn btn-secondary fas fa-ban my-1',
                },
                {
                    extend: 'collection', text: ' 输出',
                    className: 'btn btn-primary far fa-save my-1 dropdown-toggle button_group2',
                    buttons: output_buttons
                },
                {
                    text: ' 添加单行', className: 'btn btn-primary fas fa-edit my-1',
                    attr: { id: 'new' }
                },
                {
                    extend: 'collection', text: ' 批量操作', buttons: bulk_buttons,
                    className: 'btn btn-warning fas fa-wrench my-1 dropdown-toggle button_group3'
                },
                {
                    text: '使用Excel操作', className: 'btn btn-success fas fa-file-excel my-1',
                    action: function () {
                        let edit_bool = 0;
                        if (button_bool2 === true){
                            edit_bool = 1;
                        }
                        let tmp_url = "{% url 'WOPI:xlsx' %}" + "?access_token={{ request.user.id }}_" + button_bool1 ;
                        document.body.style.cursor = "wait";
                        if (api_pattern.test(ajax_url) === true) {
                            tmp_url += "&model=all_" + model0;
                            let done_flag = $.ajax({
                                    url: url0.substring(4), data: {all: 1, format: "xlsx"},
                                    dataType: 'json', contentType: "application/json",
                                    method: "GET", async: false
                            }).responseJSON.done;
                            console.info("done_flag: ",done_flag);
                            if (done_flag !== 'True') {
                                console.info("ERROR!!! Output all records to excel failed!")
                            }
                        } else {
                            tmp_url += "&model=queryset_" + model0 + '_{{ request.user.id }}';
                        }
                        // console.info("tmp_url: ", tmp_url);
                        document.body.style.cursor = "default";
                        window.open(tmp_url,'_blank');
                    }
                }
            ];
            let table_tmp = table_element.DataTable({
                "paging": true, "ordering": true,
                "info": true, "autoWidth": false,
                "responsive": false, "pagingType": "full_numbers",
                "language": {
                    "lengthMenu": "选择每页 _MENU_ 展示 ",
                    "zeroRecords": "未找到匹配结果--抱歉",
                    "info": "当前显示第 _PAGE_ 页结果，共 _PAGES_ 页",
                    "infoEmpty": "没有数据",
                    "search": "搜索",
                    "infoFiltered": "(获取 _MAX_ 项结果)",
                    "paginate": {
                        "first": "首页", "previous": "上一页",
                        "next": "下一页", "last": "末页"
                    },
                    "select": {
                        "rows": "%d行已选"
                    }
                },
                "scrollY": "300px", "scrollX": true,
                "rowReorder": true, "select": true,
                "fixedHeader": true, "lengthChange": true,
                "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]],
                "serverSide": serverSide_bool, "processing": true,
                "deferRender": true, "dom": 'rBltip',
                "buttons": buttons_list, "ajax": ajax_data,
                "columns": table_columns, "columnDefs": table_columnDefs
            });
            if (action_afterTableInit !== undefined){
                action_afterTableInit(table);
            }
            let table_body = $('#table tbody');
            table_body.on('click', 'tr', function () {
                $(this).toggleClass('selected');
            });
            // 调用modal
            table_body.on('click', 'button', function () {
                let data = table.row($(this).parents('tr')).data();
                let class_name = $(this).attr('class');
                id0 = data['id'];
                console.info("click button, id0:", id0);
                //alert(id);
                if (class_name.split(" ")[1] === 'btn-primary') {
                    // EDIT button
                    MyModelInit('更新', data);
                    $("#myModal").modal();
                } else {
                    // DELETE button
                    // alert('delete '+id);
                    // $('#modal_title').text('DELETE');
                    $("#confirm").modal();
                }
            });
            return table_tmp;
        }
        table = create_table(url0 + "?format=datatables", input_params["action_afterTableInit"]);

        $('#modelForm').on('submit', function (e) {
            e.preventDefault();
            console.info("submit, id0:", id0);
            input_params["update_func"](e, id0);
        });
        $('#confirm').on('click', '#delete', function (e) {
            input_params["delete_func"](model0, url0, id0);
        });
        $('#new').on('click', function (e) {
            e.preventDefault();
            MyModelInit('新增', {});
            if (input_params["ModalFormHeader_p"] !== undefined){
                $('#ModalFormHeader').text(input_params["ModalFormHeader_p"]);
            }
            $("#myModal").modal();
        });
        $('#bulkDelModal').on('click', '#bulkDelete', function (e) {
            e.preventDefault();
            input_params["bulkDelete_func"](table, model0, url0);
        });
        $('#myModalReset').on('click', function (e) {
            e.preventDefault();
            if ($('#modal_title').text() === '更新') {
                MyModelInit('更新', dataModelForm);
            } else {
                MyModelInit('新增', {});
            }
        });
        $("#modelForm input[type='text']").focus(function () {
            let key2 = $(this).attr('id');
            let values = $.ajax({
                url: "{% url 'ADVANCE:unique' %}", data: { model: model0, filed: key2 },
                dataType: 'json', contentType: "application/json",
                method: "GET", async: false
            }).responseJSON.values;
            console.info("values:", values, "; key2:", key2);
            input_autocomplete(values, '#' + key2);
        });

        // 查询
        // 生成查询条件栏
        $.each(range(2, 11), function (i, v) {
            let html_str = '<div class="form-inline mb-1 search_condition" id="condition' + v + '">';
            html_str += '<span class="text-info h6 mr-3">过滤条件' + v + '</span><div class="form-group mr-2">';
            html_str += '<select class="form-control SearchNot" id="SearchNot' + v + '" name="SearchNot' + v + '"">';
            html_str += '<option value="0" selected="selected"></option><option value="1">非</option></select></div>';
            html_str += '<div class="form-group mr-2"><label class="mr-1" for="SearchFieldName' + v + '">查询子表及字段</label>';
            html_str += '<select class="form-control SearchFieldName" name="SearchFieldName' + v + '" id="SearchFieldName' + v + '"></select>';
            html_str += '</div><select class="form-control SearchFieldValuePre mr-2" id="SearchFieldValuePre' + v + '" name="SearchFieldValuePre' + v + '" >';
            html_str += '<option value="exact" selected="selected">等于(大小写严格匹配)</option><option value="iexact">等于(忽略大小写)</option>';
            html_str += '<option value="contains">包含(大小写严格匹配)</option><option value="icontains">包含(忽略大小写)</option>';
            html_str += '<option value="gt">大于</option><option value="gte">大于等于</option>';
            html_str += '<option value="lt">小于</option><option value="lte">小于等于</option></select>';
            html_str += '<div class="form-group"><input type="text" class="form-control SearchFieldValue" placeholder="请输入查询字段值" ';
            html_str += 'id="SearchFieldValue' + v + '"></div></div>';
            $('#searchForm').append(html_str);
            $('#condition' + v).hide();
        });
        // 查询子表及字段下拉选框
        $('.search_condition .SearchFieldName').focus(function () {
            $(this).empty();
            $(this).parents('.search_condition').find('.SearchFieldValuePre').val('exact');
            $(this).parents('.search_condition').find('.SearchFieldValue').val("");
            let str = "";
            $.each(input_params['fields'], function (i, v) {
                str += '<option value="' + v[0] +
                    '">' + v[1] + '</option>';
            });
            $(this).append(str);
        });
        $("#card1-body").removeAttr("hidden");
        // 查询字段值下拉选框
        $('.search_condition .SearchFieldValue').focus(function () {
            // 获取想要查询的字段值
            $(this).empty();
            let input_model = model0;
            let input_field = $(this).parents('.search_condition').find('.SearchFieldName').val();
            let values = $.ajax({
                url: "{% url 'ADVANCE:unique' %}", data: {model: input_model, filed: input_field},
                dataType: 'json', contentType: "application/json",
                method: "GET", async: false
            }).responseJSON.values;
            // console.info("values:", values, "; id:", $(this).attr("id"));
            input_autocomplete(values, '#' + $(this).attr("id"));
        });
        // 实现"添加过滤条件"按钮的功能
        $('#conditionAdd').click(function (e) {
            e.preventDefault();
            conditionAdd += 1;
            $('#condition' + conditionAdd).show();
            if (conditionAdd === 10) {
                $('#conditionAdd').attr("disabled", true);
            }
        });
        // 实现"清除"按钮的功能
        $('#textareaClear').click(function (e) {
            e.preventDefault();
            $("#SearchText").val("");
            // 复位过滤条件
            $('.search_condition .SearchNot').val("0");
            $('.search_condition .SearchFieldName').empty();
            $('.search_condition .SearchFieldValuePre').val('exact');
            $('.search_condition .SearchFieldValue').val("");
            // 复位"添加过滤条件"按钮
            for (; conditionAdd > 1; conditionAdd--) {
                $('#condition' + conditionAdd).hide();
            }
            $('#conditionAdd').attr("disabled", false);
        });
        // 实现"查询"按钮的功能
        $('#textareaSubmit').click(function (e) {
            e.preventDefault();
            let text = ''; // 储存值
            for (let i = 1; i <= 10; i++) {
                let not = $('#SearchNot' + i).val(); //获取查询运算符1
                let model = model0, name = $('#SearchFieldName' + i).val(); //获取查询子表及字段
                let valuePre = $('#SearchFieldValuePre' + i).val(); //获取运算符2
                let value = $('#SearchFieldValue' + i).val(); //获取查询字段值
                if (name === null || !value) {
                    // do nothing
                } else {
                    if (!text) {
                        text = '(' + not + "\t" + model + "\t" + name + "\t" + valuePre + "\t" + value + ')';
                    } else {
                        text += ' AND (' + not + "\t" + model + "\t" + name + "\t" + valuePre + "\t" +
                            value + ')';
                    }
                }
            }
            $("#SearchText").val(text);  //最后再直接输入到文本框，覆盖原本的值
            table = create_table(url0.substring(4), input_params["action_afterTableInit"]);
        });


    }

    $(document).ready(function () {
        $('#uploadSubmit').on('click', function (e) {
            e.preventDefault();
            if ($("#uploadUrl").val() === '0') {
                $('#uploadError').text("操作失败！！！上传文件类型不能为空");
            } else if ($("#uploadFile").val() === "" || $('#uploadFile').val() === undefined || $('#uploadFile').val() === null) {
                $('#uploadError').text("操作失败！！！上传文件不能为空");
            } else {
                // 构建FormData对象
                let form_data = new FormData();
                form_data.append('uploadFile', $('#uploadFile')[0].files[0]);
                form_data.append('uploadUrl', $('#uploadUrl').val());
                form_data.append('uploadOperator', "{{ user.username }}");
                let urlUpload = "{% url 'ADVANCE:upload' %}";

                $.ajax({
                    async: true, url: urlUpload, processData: false,
                    method: 'POST', data: form_data, dataType: 'json',
                    contentType: false,
                    success: function (data) {
                        if (data.error_msg_fatal) {
                            // alert('文件上传和批量添加失败。' + data['error_msg']);
                            $('#uploadInfo').text("");
                            $('#uploadError').text(data.error_msg_fatal);
                        } else {
                            let update_records = parseInt(data.all_records) - parseInt(data.add_records);
                            /* alert('文件上传和批量添加成功，有效输入记录共有' + data.all_records +
                                "行。\n其中往数据库中增加" + data.add_records + '行记录，更新了' +
                               update_records + '行记录。'); */
                            $('#uploadInfo').text('文件上传和批量添加成功，输入记录共有' + data.all_records +
                                '行，有效的共有' + data.valid_records + "行。\n其中往数据库中增加" +
                                data.add_records + '行记录，更新了' + update_records + '行记录。' + data.warning);
                            $('#uploadError').text(data.error_msg_tolerant);
                            /* $("#uploadModal").find('form').trigger("reset");
                            $('#uploadModal').modal('hide');
                            location.reload(); */
                            setTimeout(
                                function () {
                                    window.location.reload(true);
                                }, 30000
                            );
                        }
                    }
                });
            }
        });

        $('#uploadReset').on('click', function (e) {
            e.preventDefault();
            $("#uploadFile").val("");
            $('#uploadInfo').text("");
            $('#uploadError').text("");
        });

    });
</script>
{% endblock %}

